<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>七星彩统计</title>
</head>

<body>
    <div id="app">
        <h2>模拟8888次随机开奖结果</h2>
        <div id="main" style="height: 400px;width: 95%;"></div>
        <div id="arrList">
            <ul>
                <li v-for="(item, index) in countSameArr" :key="index">排名：{{index+1}}---组号：{{item.name}}---出现：{{item.value}}</li>
            </ul>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="./random_num_class.js"></script>
<script>
    // Vue.prototype.$echarts = echarts;
    var app = new Vue({
        el: "#app",
        data() {
            return {
                baseArr:[],
                countSameArr:[],
                countSameNum:[]
            }
        },
        mounted() {
          this.initData();
          this.initEcharts();
        },
        methods: {
            initData(){
                /**
                 * RandomNum
                 * startNum int 数据源范围开始数 比如36选择7 选取数范围为1-36 则填1
                 * endNum int 数据源范围结束数 比如36选择7 选取数范围为1-36 则填36
                 * secNum int 选择数 比如36选择7 则填7
                 * ranCon int 循环次数 比如循环 8888 建议不要超过888888 否则程序卡死
                */
                var ranNum = new RandomNum(0,9,4,8888);
                this.baseArr = ranNum.makeBaseArr();
                //重复数组出现次数统计
                this.countSameArr = ranNum.countSameArr();
                //重复数字出现次数统计
                this.countSameNum = ranNum.countSameNum();
            },
            initEcharts(){
                var myChart = echarts.init(document.getElementById('main'));
                var dataNum = [];

                option = {
                    // color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : this.baseArr,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'出现次数',
                            type:'bar',
                            barWidth: '60%',
                            data:this.countSameNum,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                        }
                    ]
                };
                myChart.setOption(option);
            },
            dealData(){

            }
        }
    })
</script>

</html>